<template>
  <div class="tab">
      {{tab}}
      <tab-header :tabs="tabs" @changeIndex="changeIndex"/>
      <tab-container :content="content"/>
  </div>
</template>

<script>
import TabHeader from './tabHeader.vue'
import TabContainer from './tabContainer.vue'
export default {
 data () {
     return {
         tab: 'tab组件',
         tabs: ['手机', '电脑', '电器'],
         tabsPage: ['手机页面', '电脑页面', '电器页面'],
         content: '手机页面'
     }
 },
 methods: {
     changeIndex (data) {
         console.log(data)
         this.content = this.tabsPage[data]
     }
 },
 components: {
     TabHeader,
     TabContainer
 }
}
</script>

<style scoped>

</style>